<template>
  <md-popup id="popup-container" v-model="value" position="bottom" :has-mask="true" prevent-scroll @hide="cancel">
    <md-popup-title-bar title="乘车人数" ok-text="确认" cancel-text="取消" @confirm="confirm" @cancel="cancel"></md-popup-title-bar>
    <div class="container">
      <div class="flex-box">
        <div class="waiting-hint">
          <img class="hint-icon" :src="require('@/assets/imgs/tk_ts.png')" />
          <div class="waiting-hint">
            选择乘车人数时，请按
            <span class="hint-str">实际乘车人数</span>填写，包含成人、儿童
          </div>
        </div>
      </div>
      <md-picker ref="picker" :data="numData" :cols="1" :default-index="pickerDefaultIndex" is-view @change="onPickerConfirm" @initialed="pickerInited"></md-picker>
    </div>
  </md-popup>
</template>

<script>
import { Popup, PopupTitleBar, Picker } from 'mand-mobile';
import { mapGetters } from 'vuex';
import { SET_PIN_PASSENGER_NUMBER } from '@/store/mutations.types';
export default {
  name: 'number-selector',
  components: {
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar,
    [Picker.name]: Picker
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    max: {
      type: Number,
      default: 4
    },
    appendTo: {
      default: () => document.body
    }
  },
  data() {
    return {
      pickerDefaultIndex: [0],
      selectedIndex: 0
    };
  },
  methods: {
    confirm() {
      this.$store.commit(SET_PIN_PASSENGER_NUMBER, this.numData[0][this.selectedIndex].value);
      this.value = false;
      this.$emit('submit');
    },
    cancel() {
      this.value = false;
      this.$emit('cancel');
    },
    pickerInited() {
      this.$refs.picker.refresh();
    },
    onPickerConfirm(columnIndex, itemIndex, value) {
      this.selectedIndex = itemIndex;
    }
  },
  mounted() {
    if (this.appendTo) {
      this.appendTo.appendChild(this.$el);
    }
  },
  beforeDestroy() {
    if (this.appendTo) {
      this.appendTo.removeChild(this.$el);
    }
  },
  computed: {
    ...mapGetters(['getRoute']),
    numData() {
      let arr = [];
      for (let i = 1; i <= this.max; i++) {
        let item = {
          text: i.toString(),
          value: i
        };
        arr.push(item);
      }
      return [arr];
    }
  }
};
</script>

<style lang="stylus" scoped>
#popup-container {
  .container {
    background-color: #fff;
    height: 432px;
    width: 100vw;
    float: left;
    font-size: 22px;

    .hint {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      height: 88px;

      .hint-icon {
        width: 26px;
        height: 24px;
      }

      .hint-str {
        color: theme-color;
      }
    }

    .flex-box {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 88px;

      .waiting-hint {
        display: -webkit-box;
        font-size: 22px;

        .hint-icon {
          width: 26px;
          height: 24px;
        }

        .hint-str {
          color: theme-color;
        }

        .waiting-hint {
          color: color-text-caption;
          max-width: 26em;
          text-align: center;
        }
      }
    }
  }
}
</style>
